<template>
  <view class="content">
    <view class="bg">
      <view style="position: absolute; top: 300rpx">
        <view class="title">您好！</view>
        <view class="title">欢迎使用教室预约小程序</view>
      </view>
    </view>
    <view class="Login">
      <view class="logo">
        <view style="width: 160rpx; height: 100%">
          <image :src="logo" mode="scaleToFill" />
        </view>
      </view>
      <!-- 表单 -->
      <view class="form">
        <uni-forms
          :rules="rules"
          style="width: 100%"
          :model="form"
          ref="formRef"
        >
          <uni-forms-item name="account">
            <view class="account_view">
              <view class="text">学号/邮箱</view>
              <view class="input_item">
                <input
                  v-model="form.account"
                  placeholder="请输入学号/邮箱"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="password">
            <view class="password_view">
              <view class="text">密码</view>
              <view class="input_item">
                <input
                  v-model="form.password"
                  placeholder="请输入密码"
                  placeholder-class="input-placeholder"
                  type="password"
                />
              </view>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="button">
        <button class="B" @tap="submit">登录</button>
        <view
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 15rpx;
          "
        >
          <span @tap="ToRegister">没有账号？注册</span>
          <span @tap="Forgot">忘记密码</span>
        </view>
      </view>
      <view class="wx-logo">
        <view @tap="wxlogin" style="width: 100rpx; height: 100%">
          <image :src="wx_logo" mode="scaleToFill" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { Login, WXLogin } from "../../utils/general";
const logo = ref("http://smzacc0p8.hn-bkt.clouddn.com/logo.png");
const wx_logo = ref("http://smzacc0p8.hn-bkt.clouddn.com/wx_logo.png");
//表单数据
const form = ref({
  account: "",
  password: "",
});
const formRef = ref();
const rules = {
  account: {
    rules: [
      { required: true, errorMessage: "请输入账号" },
      {
        minLength: 0,
        maxLength: 20,
        errorMessage: "账号不超过20个字符",
      },
    ],
  },
  password: {
    rules: [
      { required: true, errorMessage: "请输入密码" },
      { max: 20, errorMessage: "账号长度为11" },
    ],
  },
};
//提交登录信息
const submit = async () => {
  try {
    await formRef?.value?.submit();
    const res = await Login(form.value);
    if (res?.data?.code !== 200)
      return uni.showToast({
        title: res?.data?.message,
        icon: "error",
      });
    else {
      uni.setStorageSync("Token", res?.data?.message);
      uni.showToast({
        title: "登录成功",
      });
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }, 500);
    }
  } catch (error) {
    console.log(error);
  }
};
//去注册
const ToRegister = () => {
  uni.navigateTo({
    url: "/pageA/register/register",
  });
};
//微信登录
const wxlogin = async () => {
  //获取code
  uni.showLoading({
    title: "正在登录...",
    mask: true, // 是否显示透明蒙层，防止触摸穿透
  });
  uni.login({
    provider: "weixin",
    success: async (res) => {
      // 登录成功
      const Res = await WXLogin(res?.code);
      if (Res?.data?.code == 200) {
        uni.setStorageSync("Token", Res?.data?.message);
        uni.showToast({
          title: "登录成功",
        });
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/index/index",
          });
        }, 500);
      } else {
        uni.showToast({
          title: Res?.data?.message,
          icon: "error",
        });
      }
    },
  });
};
//忘记密码
const Forgot = () => {
  uni.navigateTo({
    url: "/pageA/forgotword/forgotword",
  });
};
</script>

<style  lang="scss">
image {
  height: 100%;
  width: 100%;
}
.content {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  position: relative;
  .bg {
    width: 100%;
    height: 40vh;
    background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
    z-index: 1;
    .title {
      bottom: 30px;
      font-weight: bold;
      font-size: 40rpx;
      padding: 10rpx 20rpx;
    }
  }
  .Login {
    box-sizing: border-box;
    width: 100%;
    height: 60vh;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    margin-top: -30rpx;
    display: flex;
    flex-direction: column;
    padding: 0 60rpx;
    // grid-template-rows: 160rpx 300rpx 180rpx 180rpx;
    .logo {
      height: 160rpx;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .form {
      width: 100%;
      // height: 300rpx;
    }
    .text {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .input_item {
      margin-top: 10rpx;
      height: 70rpx;
      border-bottom: #ccc 2rpx solid;
      .input-placeholder {
        color: #ccc;
        font-size: 28rpx;
      }
      input {
        height: 100%;
      }
    }
    .account_view {
      width: 100%;
      // height: 150rpx;
    }
    .password_view {
      width: 100%;
      // height: 150rpx;
    }
    .button {
      width: 100%;
      height: 150rpx;
      .B {
        background-color: #b8d587;
        color: #fff;
      }
    }
    .wx-logo {
      margin-top: 30rpx;
      height: 100rpx;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}
</style>
